<template>
  <div>
  <h2>我的购物车</h2>
    
    <!-- 上部分 -->
    <div class="cart-item" v-for="item in products">
      <input type="checkbox" />
      <span>{{item.name}}</span>
      <span class="price">￥{{item.price}}</span>  
      <button class="item-quantity" >−</button>
      <a>{{ item.count }}</a>
      <button class="item-quantity" @click="add(index)">+</button>    
      <button class="delete-btn">🗑️</button>
    </div>
  
    <!-- 下部分 -->
    <div class="summary">
      <div>
        <input type="checkbox"  />
        <label >已选：0</label>
      </div>
  
      <div class="total-price">￥0</div>
      <button class="checkout-btn" disabled>结算</button>
    </div>
  </div>
   </template>
   
   <script>
  
      import {ref,onMounted,computed, proxyRefs} from 'vue'
   
      export default{
        setup(){
          //  数据
          /**  
           * 
           * 1. 完成+-功能
  
           * 2. 完成已选商品的数量：去找数据中checked值为true的数量
           *    
           * 3. 实现全选功能
           * 
           *  4.完成总价功能 
           *   先筛选出所有勾选的商品，然后用单价乘以数量，求和
           * 5.完成删除功能
           * 6.结算功能：有勾选就可用，没有勾选就不可用
           *    
           * 
           * **/
          const products = ref([
            {id:1001,name:"iphone",price:8000},
            {id:1002,name:"PS5",price:5000},
            {id:1003,name:"3天上手vue3",price:39.9},
            {id:1004,name:"太阳帽",price:89},
          ])
          onMounted(()=>{
            products.value.forEach(e=>{
              e.count=1
              e.checked=false
            })
          })
          const add=(i)=>{
            products.value[i].count++
          }
          //  返回
          return{
            products,add
          }
        }
      }
   </script>
   
   
   <style>
  /* 上部分样式 */
  .cart-item {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ccc;
      padding: 10px 0;
  }
  
  /* 价格样式 */
  .price {
      color: #e91e63;
  }
  
  /* 加减按钮部分样式 */
  .item-quantity {
      display: flex;
      align-items: center;
      justify-content: center;
      margin:0 10px;
      width: 30px;
      height: 30px;
  }
  
  /* 删除按钮样式 */
  .delete-btn {
      background: none;
      border: none;
      cursor: pointer;
  }
  
  /* 下部分样式 */
  .summary {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
  }
  
  /* 总价样式 */
  .total-price {
      color: #e91e63;
      font-size: 1.5em;
  }
  
  /* 结算按钮样式 */
  .checkout-btn {
      background-color: #f44336;
      color: #fff;
      border: none;
      padding: 10px 20px;
      cursor: pointer;
  }
  span{
    width: 100px;
    margin:0 10px;
    display: inline-block;
  }

  button[disabled] {
    background: gray !important;
    cursor:default !important;
  }
  
   </style>
   